header.contacts {
    padding-right: 20px;

    div.search {
        flex-grow: 1;
        margin: 11px 20px 0 20px;
    }
}

section#contacts {
    button.add-contact {
        float: right;
        margin-right: 20px;
        padding: 6.5px 5px;
        margin-top: 20px;
    }

    form.add-contact {
        margin: 65px 20px 0 20px;
        display: inline-block;

        div {
            width: 200px;
            display: inline-block;
            margin-right: 20px;
        }
    }

    div#contact-list {
        overflow-y: auto;
        position: absolute;
        top: 52px;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid;

        &.form-open {
            top: 137px;
        }
    }

    div.contact {
        padding: 5px 20px;
        height: 40px;
        overflow: hidden;
        display: flex;

        input {
            width: auto;
        }

        div {
            display: inline-block;
            vertical-align: top;
        }

        div.avatar {
            position: relative;
            border-radius: 4px;
            margin-right: 10px;
            margin-top: 4px;

            img {
                width: 22px;
                border-radius: 4px;
            }

            span {
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
                color: white;
                margin-top: 6px;
            }
        }

        div.form, div.text {
            flex-grow: 1;
        }

        div.text {
            margin-top: 3px;
        }

        div.buttons {
            width: 25%;
            text-align: right;
        }
    }
}
